import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import path from "path";
import { VantResolver } from "@vant/auto-import-resolver";
import viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // 插件
    vue(),
    // 自动导入
    AutoImport({
      imports: ["vue", "vue-router"],
      // 导入存储的文件地址
      dts: "src/auto-import.d.ts",
      resolvers: [VantResolver()],
    }),
    // 自动导入组件
    Components({
      resolvers: [VantResolver()],
      // 导入存储的文件地址
      dts: "src/components.d.ts",
    }),
    viteCompression({
      ext: ".gz", // 输出的压缩文件扩展名
      algorithm: "gzip", // 使用 Gzip 算法
      threshold: 102400, // 仅压缩大于 100KB 的文件
      deleteOriginFile: false, // 是否删除源文件
    }),
  ],
  resolve: {
    alias: {
      // 配置路径别名
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    // 打包的一些配置策略
    assetsDir: "assets", // 静态资源输出目录
    rollupOptions: {
      output: {
        // 输出资源的配置
        entryFileNames: "assets/js/[name]-[hash].js",
        chunkFileNames: "assets/js/[name]-[hash].js",
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]", // 输出的静态资源的文件格式配置
        compact: true,
        // 文档 https://cn.rollupjs.org/configuration-options/#output-manualchunks
        manualChunks: (id: string) => {
          // 分包策略，如果打包的资源是node_modules下的，则单独打包，不会打包在每个打包文件中
          if (id.includes("node_modules")) {
            // return id.toString().split('node_modules/')[1].split('/')[0].toString(); // 拆分多个vendors
            return "vendor"; // 合成一个vendors
          }
        },
      },
    },
  },
  css: {
    modules: {}, // 对 vite 默认的 css 模块化进行更改
    preprocessorOptions: {
      // 对css 预处理器进行相关配置 key-预处理器类型 value-预处理相关配置(找官网)
      scss: {
        // 引入全局css变量
        additionalData: '@use "@/theme/variable.scss" as *;',
        api: "modern-compiler",
      },
    },
    devSourcemap: true, // 开启css 的 sourceMap(文件索引)，能够帮助我们确定当前出错或处理的 css 文件是哪个
    postcss: {}, // postcss相关配置
  },
  server: {
    host: "0.0.0.0", // 让localhost可以访问
    proxy: {
      "/api": {
        target: "http://localhost:8080", // 后端api 服务器的url
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ""), // 重写路径
      },
    },
  },
});

